<template>
    <el-form :inline="true" ref="seriesFormRef" :model="seriesForm" :rules="rules" label-width="80px"
        class="seriesform">
        <template v-if="getTplTypeData == ''">
            <el-form-item prop="tplid" label="子集模板">
                <el-select v-model="seriesForm.tplid" placeholder="请选择子集模板" @change="handleSeriesTplChange">
                    <el-option v-for="item,index in seriesTplKeyValue" :key="index" :label="item" :value="index">
                        {{item}}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-divider></el-divider>
        </template>
        <!--<el-form-item prop="goodsids" label="关联商品" style="width:100%" v-if="getDialogData.seriesid == undefined && mediaRelGoodsStatus">
            <ul class="liveimglist">
                <li v-for="(goodsInfo,index) in seriesForm.goodsList" :key="goodsInfo.goods_id">
                    <el-image :src="goodsInfo.imgurl_720"
                        :initial-index="index"
                        fit="scale-down" style="width:100%;height:100px"
                    />
                    <h5 class="gtitle txtclamp2">{{goodsInfo.goods_name}}</h5>
                    <div class="gsubtitle">
                        <span>ID {{goodsInfo.goods_id}}</span>
                        <a
                            href="javascript:;"
                            @click="handleDeleteGoods(index)"
                            onmouseover="this.style.color='#f56c6c'"
                            onmouseout="this.style.color='#333'"
                        >
                            删除
                        </a>
                    </div>
                </li>
                <li class="imgplus" @click="handleGoodsList">
                    <div>
                    <el-icon>
                        <plus />
                    </el-icon>
                    </div>
                </li>
            </ul>
        </el-form-item>-->

    </el-form>
    <!--关联商品-->
    <media-rel-goods ref="mediaRelGoodsRef" :relGoodsVisible="mediaRelGoodsVisible" relGoodsOperationType="mediaCreate"
        @cancelRelGoodsDialog="cancelRelGoodsDialog" @handleConfirmSelectedGoods="handleConfirmSelectedGoods" />
    <!--子集动态字段-->
    <longvideocommon
        v-if="asyncComponentName == '5f80217524ac4'"
        :formData="seriesFormExtendsData"
        :toChildData="toChildData"
        ref="seriesFormExtendsDataRef"
    />
    <theater
        v-if="asyncComponentName == '5fe050977ba47'"
        :formData="seriesFormExtendsData"
        :toChildData="toChildData"
        ref="seriesFormExtendsDataRef"
    />
    <vodvideo
        v-if="asyncComponentName == 'f904db468ed111ecb86d00163e30b2e1'"
        :formData="seriesFormExtendsData"
        :toChildData="toChildData"
        ref="seriesFormExtendsDataRef"
    />
    <eventlive
        v-if="asyncComponentName == '4426c5688ed111ecb86d00163e30b2e1'"
        :formData="seriesFormExtendsData"
        :toChildData="toChildData"
        ref="seriesFormExtendsDataRef"
    />
    <reservelive
        v-if="asyncComponentName == 'db5416e88ed111ecb86d00163e30b2e1'"
        :formData="seriesFormExtendsData"
        :toChildData="toChildData"
        ref="seriesFormExtendsDataRef"
    />
    <channellive
        v-if="asyncComponentName == 'bcf23e6ca1ac11ec9003ecf4bbdc75f0'"
        :formData="seriesFormExtendsData"
        :toChildData="toChildData"
        ref="seriesFormExtendsDataRef"
    />
    <liveroomaudio
        v-if="asyncComponentName == 'dc56caf0e62811ecafd8ecf4bbc33d44'"
        :formData="seriesFormExtendsData"
        :toChildData="toChildData"
        ref="seriesFormExtendsDataRef"
    />
    <el-row justify="center">
        <el-button type="primary" @click="handleSeriesSubmit">保存</el-button>
    </el-row>
</template>

<script>
    import { toRef,ref, reactive } from 'vue'
    // import {mediaImageUpload} from '@/api/media/uploadimage'
    import {ElMessage} from 'element-plus'
    import {getSeriesInfo,createSeries,updateSeries} from '@/api/series/series'
    import { getSeriesTplData } from '@/api/media/mediatype'

    import longvideocommon from './components/EditExtends/LongVideoCommon'
    import theater from './components/EditExtends/Theater'
    import vodvideo from './components/EditExtends/VodVideo'
    import eventlive from './components/EditExtends/EventLive'
    import reservelive from './components/EditExtends/ReserveLive'
    import channellive from './components/EditExtends/ChannelLive'
    import liveroomaudio from './components/EditExtends/LiveRoomAudio'
    import MediaRelGoods from '../media/components/MediaRelGoods'
    import {getMediaInfo} from "@/api/media/media";
    // import {Plus} from '@element-plus/icons'
    export default {
        name: "",
        components: {
            // Plus,
            longvideocommon,
            theater,
            vodvideo,
            eventlive,
            reservelive,
            channellive,
            liveroomaudio,
            MediaRelGoods
        },
        props:{
            toDialogData:{
                type: Object
            },
            tplTypeData:{
                type: String,
                default: '' // vod, reservelive, channellive
            }
        },
        emits:['cancelDialog','getData'],
        setup(props,context) {
            const asyncComponentName = ref('')
            const seriesFormExtendsData = ref({})
            const toChildData = ref({})
            const seriesFormExtendsDataRef = ref('')
            const videoMediumType = ref('')
            // 弹窗获取数据
            const getDialogData = toRef(props, 'toDialogData')
            const getTplTypeData = toRef(props, 'tplTypeData')

            // 关联商品显示的tplid
            const mediaRelGoodsData = ref([
                '4426c5688ed111ecb86d00163e30b2e1',
                'db5416e88ed111ecb86d00163e30b2e1',
                'f904db468ed111ecb86d00163e30b2e1',
                'bcf23e6ca1ac11ec9003ecf4bbdc75f0',

            ])
            const mediaRelGoodsStatus = ref(false)

            // 子集模板
            const seriesTplKeyValue = ref({})
            const seriesTplData= ref({})
            const getSeriesTpl = () => {
                if( getDialogData.value.mediatype != undefined ){
                    let query = {mediatype:getDialogData.value.mediatype}
                    getSeriesTplData(query).then(response => {
                        if( response.errcode == 0 ){
                            seriesTplData.value = {}
                            if( response.data.length > 0 ){
                                response.data.forEach((v,i) => {
                                    seriesTplData.value[v.tplid] = v
                                    // console.log(i)
                                    if(i == 0 && getDialogData.value.seriesid == undefined){
                                        rules.episodenum = {required: true, message: '请输入集号', trigger: 'blur'}
                                    //if(v.tpltype == 'eventlive' && getDialogData.value.seriesid == undefined){
                                        asyncComponentName.value = v.tplid
                                        seriesForm.value.tplid = v.tplid
                                        if (v.tplid == '4426c5688ed111ecb86d00163e30b2e1' ){
                                            seriesFormExtendsData.value.anchors = []
                                        } else if (v.tplid == 'db5416e88ed111ecb86d00163e30b2e1' ){
                                            rules.episodenum = {}
                                            seriesFormExtendsData.value.anchors = []
                                            seriesFormExtendsData.value.selectGaskets = []
                                            seriesFormExtendsData.value.gaskets = []
                                            seriesFormExtendsData.value.definition = 2
                                            seriesFormExtendsData.value.pushtype = 1
                                            seriesFormExtendsData.value.videolayout = 'horizontal'
                                        }
                                    }
                                    seriesTplKeyValue.value[v.tplid] = v.name
                                })
                                if(mediaRelGoodsData.value.indexOf(seriesForm.value.tplid) >= 0){   
                                    mediaRelGoodsStatus.value = true
                                }
                                switch (getTplTypeData.value){
                                    case 'f904db468ed111ecb86d00163e30b2e1':
                                        videoMediumType.value = 'vod'
                                        asyncComponentName.value =  'f904db468ed111ecb86d00163e30b2e1'
                                        seriesForm.value.tplid =  'f904db468ed111ecb86d00163e30b2e1'
                                        break;
                                    case 'db5416e88ed111ecb86d00163e30b2e1':
                                        asyncComponentName.value = 'db5416e88ed111ecb86d00163e30b2e1'
                                        seriesForm.value.tplid = 'db5416e88ed111ecb86d00163e30b2e1'
                                        break;
                                    case 'bcf23e6ca1ac11ec9003ecf4bbdc75f0':
                                        videoMediumType.value = 'live'
                                        asyncComponentName.value = 'bcf23e6ca1ac11ec9003ecf4bbdc75f0'
                                        seriesForm.value.tplid = 'bcf23e6ca1ac11ec9003ecf4bbdc75f0'
                                        break;
                                    case 'dc56caf0e62811ecafd8ecf4bbc33d44':
                                        asyncComponentName.value = 'dc56caf0e62811ecafd8ecf4bbc33d44'
                                        seriesForm.value.tplid = 'dc56caf0e62811ecafd8ecf4bbc33d44'
                                        break;
                                }
                            }
                        }else{
                            console.log(response)
                        }
                    })
                }
            }
            const handleSeriesTplChange = () => {
                asyncComponentName.value = seriesForm.value.tplid
                // console.log(asyncComponentName.value)
                rules.episodenum = {required: true, message: '请输入集号', trigger: 'blur'}
                seriesFormExtendsData.value = {}
                if (asyncComponentName.value == '4426c5688ed111ecb86d00163e30b2e1' ){
                    seriesFormExtendsData.value.anchors = []
                } else if (asyncComponentName.value == 'db5416e88ed111ecb86d00163e30b2e1' ){
                    seriesFormExtendsData.value.anchors = []
                    seriesFormExtendsData.value.selectGaskets = []
                    seriesFormExtendsData.value.gaskets = []
                    seriesFormExtendsData.value.definition = 2
                    seriesFormExtendsData.value.pushtype = 1
                    seriesFormExtendsData.value.videolayout = 'horizontal'
                    rules.episodenum = {}
                }

                switch ( asyncComponentName.value ){
                    // 点播
                    case 'f904db468ed111ecb86d00163e30b2e1':
                        videoMediumType.value = 'vod'
                    break
                    case 'bcf23e6ca1ac11ec9003ecf4bbdc75f0':
                        videoMediumType.value = 'live'
                    break
                }
            }
            
            //获取节目集详情
            getMediaInfo({ mediaid: getDialogData.value.mediaid }).then(response => {
                if (response.errcode == 0) {
                    toChildData.value = response.data
                }
            })

            const seriesFormRef = ref(null)
            const seriesForm = ref({
                tplid:null,
                /*name:null,
                episodenum:null,
                programtype:null,
                alias:null,
                abstract:null,
                content:null,
                duration:null*/
            })
            const rules = reactive({
                tplid: {required: true, message: '请选择模板', trigger: 'change'},
            })
            const handleSeriesSubmit = () =>{
                seriesFormRef.value.validate(valid => {
                    if(valid){
                        if( seriesFormExtendsDataRef.value != null && seriesFormExtendsDataRef.value.extendsRef != undefined ){
                            seriesFormExtendsDataRef.value.extendsRef.validate(valid1 => {
                                if( valid1 ){
                                    let postData = ref({})
                                    Promise.all([getSeriesPostData(postData.value)]).then(topResponse => {
                                        console.log(topResponse)
                                        if( getDialogData.value.seriesid != undefined ){
                                            postData.value.seriesid = getDialogData.value.seriesid
                                            updateSeries(postData.value).then(response => {
                                                if( response.errcode == 0 ){
                                                    ElMessage({type: 'success', message: '更新成功', duration: 2000})
                                                    context.emit('cancelDialog')
                                                    context.emit('getData')
                                                }else{
                                                    console.log(response)
                                                }
                                            })
                                        }else{
                                            createSeries(postData.value).then(response => {
                                                if( response.errcode == 0 ){
                                                    ElMessage({type: 'success', message: '添加成功', duration: 2000})
                                                    context.emit('cancelDialog')
                                                    context.emit('getData')
                                                }else{
                                                    console.log(response)
                                                }
                                            })
                                        }
                                    }).catch(err => {
                                        ElMessage({type: 'warning', message: err, duration: 2000})
                                    })
                                }
                            })
                        }else{
                            let postData = ref({})
                            Promise.all([getSeriesPostData(postData.value)]).then(topResponse => {
                                console.log(topResponse)
                                if( getDialogData.value.seriesid != undefined ){
                                    postData.value.seriesid = getDialogData.value.seriesid
                                    updateSeries(postData.value).then(response => {
                                        if( response.errcode == 0 ){
                                            ElMessage({type: 'success', message: '更新成功', duration: 2000})
                                            context.emit('cancelDialog')
                                            context.emit('getData')
                                        }else{
                                            console.log(response)
                                        }
                                    })
                                }else{
                                    createSeries(postData.value).then(response => {
                                        if( response.errcode == 0 ){
                                            ElMessage({type: 'success', message: '添加成功', duration: 2000})
                                            context.emit('cancelDialog')
                                            context.emit('getData')
                                        }else{
                                            console.log(response)
                                        }
                                    })
                                }
                            }).catch(err => {
                                ElMessage({type: 'warning', message: err, duration: 2000})
                            })
                        }
                    }
                })
            }
            function getSeriesPostData(seriesFormData){
                return new Promise((resolve, reject) => {
                    seriesFormData.corpid = getDialogData.value.corpid
                    seriesFormData.subid = getDialogData.value.subid
                    seriesFormData.uid = getDialogData.value.uid
                    seriesFormData.groupid = getDialogData.value.groupid
                    seriesFormData.mediaid = parseInt(getDialogData.value.mediaid)
                    seriesFormData.tplid = seriesForm.value.tplid
                    seriesFormData.name = seriesFormExtendsData.value.name
                    seriesFormData.episodenum = seriesFormExtendsData.value.episodenum
                    seriesFormData.alias = seriesFormExtendsData.value.alias
                    seriesFormData.abstract = seriesFormExtendsData.value.abstract
                    seriesFormData.content = seriesFormExtendsData.value.content
                    seriesFormData.cpid = seriesFormExtendsData.value.cpid
                    seriesFormData.sourceid = seriesFormExtendsData.value.sourceid
                    seriesFormData.paytype = seriesFormExtendsData.value.paytype
                    seriesFormData.duration = parseInt(seriesFormExtendsData.value.duration)
                    if( seriesForm.value.goodsids != undefined ){
                        seriesFormData.goodsids = seriesForm.value.goodsids
                    }
                    seriesFormData.extends = {programtype:seriesForm.value.programtype}
                    
                    //console.log(seriesFormExtendsData.value)
                    let errMsg = ''
                    switch(seriesForm.value.tplid){
                        // 事件直直播
                        case '4426c5688ed111ecb86d00163e30b2e1':
                            if(seriesFormExtendsData.value.definition == undefined || seriesFormExtendsData.value.definition == ''){
                                errMsg = '请选择清晰度'
                                break;
                            }
                            if(seriesFormExtendsData.value.pushtype == undefined || seriesFormExtendsData.value.pushtype == ''){
                                errMsg = '请选择推流类型'
                                break;
                            }
                            /*if( seriesFormExtendsData.value.anchors.length <= 0 ){
                                errMsg = '请添加主播'
                                break;
                            }*/
                            if( seriesFormExtendsData.value.anchors.length > 0 ){
                                seriesFormExtendsData.value.anchors.forEach((item,key) => {
                                    if( errMsg != '' ){
                                        return
                                    }
                                    if( !item.idtype ){
                                        errMsg = '主播'+(key+1)+'卡号类型不能为空'
                                    }else if(!item.fullname){
                                        errMsg = '主播'+(key+1)+'姓名不能为空'
                                    }else if(!item.idnum){
                                        errMsg = '主播'+(key+1)+'卡号不能为空'
                                    }else if(!item.certno){
                                        errMsg = '主播'+(key+1)+'认证编号不能为空'
                                    }
                                })
                            }
                            break;
                        // 预约直播
                        case 'db5416e88ed111ecb86d00163e30b2e1':
                            if(seriesFormExtendsData.value.definition == undefined || seriesFormExtendsData.value.definition == ''){
                                errMsg = '请选择清晰度'
                                break;
                            }
                            if(seriesFormExtendsData.value.pushtype == undefined || seriesFormExtendsData.value.pushtype == ''){
                                errMsg = '请选择推流类型'
                                break;
                            }
                            if(seriesFormExtendsData.value.reservetime == undefined || seriesFormExtendsData.value.reservetime == ''){
                                errMsg = '请选择预约时间'
                                break;
                            }
                            /*if( seriesFormExtendsData.value.anchors.length <= 0 ){
                                errMsg = '请添加主播'
                                break;
                            }*/
                            if( seriesFormExtendsData.value.anchors.length > 0 ){
                                seriesFormExtendsData.value.anchors.forEach((item,key) => {
                                    if( errMsg != '' ){
                                        return
                                    }
                                    if( !item.idtype ){
                                        errMsg = '主播'+(key+1)+'卡号类型不能为空'
                                    }else if(!item.fullname){
                                        errMsg = '主播'+(key+1)+'姓名不能为空'
                                    }else if(!item.idnum){
                                        errMsg = '主播'+(key+1)+'卡号不能为空'
                                    }else if(!item.certno){
                                        errMsg = '主播'+(key+1)+'认证编号不能为空'
                                    }
                                })
                            }
                            break;
                        // 频道直播
                        case 'bcf23e6ca1ac11ec9003ecf4bbdc75f0':
                            seriesFormData.videoids = seriesFormExtendsData.value.videoids
                            /*if( seriesFormExtendsData.value.videoids != undefined && seriesFormExtendsData.value.videoids.length != undefined && seriesFormExtendsData.value.videoids.length > 0 ){
                                seriesFormData.videoids = seriesFormExtendsData.value.videoids
                            }*/
                            break;
                        // 视频点播
                        case 'f904db468ed111ecb86d00163e30b2e1':
                            seriesFormData.videoids = seriesFormExtendsData.value.videoids
                            /*if( seriesFormExtendsData.value.videoids != undefined && seriesFormExtendsData.value.videoids.length != undefined && seriesFormExtendsData.value.videoids.length > 0 ){
                                seriesFormData.videoids = seriesFormExtendsData.value.videoids
                            }*/
                            break;
                        //音频
                        case 'dc56caf0e62811ecafd8ecf4bbc33d44':
                            seriesFormData.videoids = seriesFormExtendsData.value.videoids
                            /*if( seriesFormExtendsData.value.videoids != undefined && seriesFormExtendsData.value.videoids.length != undefined && seriesFormExtendsData.value.videoids.length > 0 ){
                                seriesFormData.videoids = seriesFormExtendsData.value.videoids
                            }*/
                            break;
                    }
                    if( errMsg != '' ){
                        reject( errMsg )
                    }
                    Object.assign(seriesFormData.extends, seriesFormExtendsData.value)
                    // 封面图处理
                    seriesFormData.imgids = []
                    if (seriesFormExtendsData.value.thumb != undefined && seriesFormExtendsData.value.thumb.length > 0){
                        seriesFormExtendsData.value.thumb.forEach(function(imgInfo){
                            seriesFormData.imgids.push(imgInfo.imgid)
                        })
                    }
                    resolve('success')
                    /*
                    // 处理缩略图上传
                    let imgData = {}
                    
                    Object.keys(formThumbData.value).forEach(function(key){
                        // console.log(uploadImgObj[key].length)
                        if( formThumbData.value[key].length > 0 ){
                            imgData[key] = []
                            formThumbData.value[key].forEach(function(imgInfo){
                                let uploadData = new FormData()
                                uploadData.append("corpid", getDialogData.value.corpid)
                                uploadData.append("subid", getDialogData.value.subid)
                                uploadData.append("uid", getDialogData.value.uid)
                                uploadData.append("groupid", getDialogData.value.groupid)
                                uploadData.append("isself", 1)
                                uploadData.append("upfile", imgInfo.raw)
                                mediaImageUpload(uploadData).then(response => {
                                    if( response.errcode == 0 ){
                                        imgData[key].push(response.data.imgid)
                                    }else{
                                        console.log(response)
                                    }
                                })
                            })
                        }
                    })
                    seriesFormData.thumb = imgData['thumb'] !== undefined ? imgData['thumb'] : [];
                    */
                })
            }
            if( getDialogData.value.seriesid != undefined ){
                // rules.episodenum = {required: true, message: '请输入集号', trigger: 'blur'}
                getSeriesInfo({seriesid: getDialogData.value.seriesid}).then(response => {
                    if( response.errcode == 0 ){
                        /*if( response.data.cpid ){
                            sourceidDisabled.value = false
                        }*/
                        asyncComponentName.value = response.data.tplid
                        seriesForm.value.tplid = response.data.tplid
                        seriesFormExtendsData.value = {}
                        seriesFormExtendsData.value.name = response.data.name
                        seriesFormExtendsData.value.episodenum = response.data.episodenum
                        seriesFormExtendsData.value.programtype = response.data.extends.programtype
                        seriesFormExtendsData.value.alias = response.data.alias
                        seriesFormExtendsData.value.abstract = response.data.abstract
                        seriesFormExtendsData.value.content = response.data.content
                        seriesFormExtendsData.value.duration = response.data.duration
                        seriesFormExtendsData.value.cpid = response.data.cpid
                        seriesFormExtendsData.value.sourceid = response.data.sourceid
                        seriesFormExtendsData.value.thumb = []
                        if ( response.data.thumbs != undefined && response.data.thumbs.length > 0 ){
                            response.data.thumbs.forEach(function (val) {
                                let thumbImgInfo = { name: null, imgid: null, url: null }
                                thumbImgInfo.name = val.name
                                thumbImgInfo.imgid = val.imgid
                                thumbImgInfo.url = val.viewurl
                                thumbImgInfo.layout = ''
                                seriesFormExtendsData.value.thumb.push(thumbImgInfo)
                            })
                        }
                        // asyncComponentName.value = seriesTplData.value[seriesForm.value.tplid].tpltype
                
                        if (asyncComponentName.value == '4426c5688ed111ecb86d00163e30b2e1' ){
                            seriesFormExtendsData.value.anchors = response.data.extends.anchors != undefined ? response.data.extends.anchors : []
                            seriesFormExtendsData.value.definition = response.data.extends.definition != undefined ? response.data.extends.definition : ''
                            seriesFormExtendsData.value.pushtype = response.data.extends.pushtype != undefined ? response.data.extends.pushtype : ''
                            seriesFormExtendsData.value.videolayout = response.data.extends.videolayout != undefined ? response.data.extends.videolayout : ''
                        } else if (asyncComponentName.value == 'db5416e88ed111ecb86d00163e30b2e1' ){
                            rules.episodenum = {}
                            seriesFormExtendsData.value.definition = response.data.extends.definition != undefined ? response.data.extends.definition : ''
                            seriesFormExtendsData.value.pushtype = response.data.extends.pushtype != undefined ? response.data.extends.pushtype : ''
                            seriesFormExtendsData.value.anchors = response.data.extends.anchors != undefined ? response.data.extends.anchors : []
                            seriesFormExtendsData.value.reservetime = response.data.extends.reservetime != undefined ? response.data.extends.reservetime : ''
                            seriesFormExtendsData.value.videolayout = response.data.extends.videolayout != undefined ? response.data.extends.videolayout : ''
                            if(response.data.extends.gaskets != undefined && response.data.extends.gaskets.length > 0){
                                seriesFormExtendsData.value.selectGaskets = response.data.extends.gaskets
                                seriesFormExtendsData.value.gaskets = []
                                response.data.extends.gaskets.forEach(item => {
                                    seriesFormExtendsData.value.gaskets.push(item.videoid)
                                })
                            }else{
                                seriesFormExtendsData.value.selectGaskets = []
                                seriesFormExtendsData.value.gaskets = []
                            }
                        }
                    }else{
                        console.log(response)
                        setTimeout(function() {
                            context.emit('cancelDialog')
                        }, 2000);
                    }
                })
            }
            const init = () => {
                getSeriesTpl()

                /*getCps({pagesize:1000}).then(response => {
                    if( response.errcode == 0 ){
                        mediaCpList.value = response.data.list
                    }else{
                        console.log(response)
                    }
                })*/
            }

            // 商品关联
            const mediaRelGoodsVisible = ref(false)
            const mediaRelGoodsRef = ref('')
            const cancelRelGoodsDialog = () => {
                mediaRelGoodsVisible.value = false
            }
            
            const handleGoodsList = () => {
                mediaRelGoodsVisible.value = true
                mediaRelGoodsRef.value.getGoodsDataList()
            }
            const handleConfirmSelectedGoods = (data) => {
                if(data.length > 0){
                    seriesForm.value.goodsids == undefined ? seriesForm.value.goodsids = [] : ''
                    seriesForm.value.goodsList == undefined ? seriesForm.value.goodsList = [] : ''
                    data.forEach(goodsInfo => {
                        if(seriesForm.value.goodsids.indexOf(goodsInfo.goods_id) < 0){
                            seriesForm.value.goodsList.push(goodsInfo)
                            seriesForm.value.goodsids.push(goodsInfo.goods_id)
                        }
                    })
                }
            }
            const handleDeleteGoods = ( goodsIndex ) => {
                seriesForm.value.goodsids.splice(goodsIndex,1)
                seriesForm.value.goodsList.splice(goodsIndex,1)
            }

            return {
                asyncComponentName,
                seriesFormExtendsData,
                toChildData,
                seriesFormExtendsDataRef,
                videoMediumType,
                getDialogData,
                getTplTypeData,
                mediaRelGoodsData,
                mediaRelGoodsStatus,
                seriesTplKeyValue,
                handleSeriesTplChange,
                seriesFormRef,
                seriesForm,
                rules,
                handleSeriesSubmit,
                init,
                mediaRelGoodsVisible,
                mediaRelGoodsRef,
                cancelRelGoodsDialog,
                handleGoodsList,
                handleConfirmSelectedGoods,
                handleDeleteGoods,
            }
        }
    }
</script>

<style scoped  lang="scss">
    .el-divider--horizontal{
        margin:0 0 15px;
    }
    .el-divider{
        border-top: 1px dashed #ddd;
        background-color: transparent;
    }
    
</style>
<style lang="scss">

    .seriesform{
        .el-form-item{
            width: 49%;
            margin-right:2%;
            margin-bottom: 18px;
            .el-form-item__content{
                line-height: 36px;
                .el-input{
                    .el-input__inner{
                        height: 36px !important;
                        line-height: 36px !important;
                    }
                }
                .el-radio-group{
                    height: 36px;
                    box-sizing: border-box;
                    .el-radio{
                        height: 36px;
                    }
                }
            }
        }
        .el-form-item:nth-child(2n){margin-right: 0;}
        .el-form-item__label{
            color: #999;
            line-height:36px;
        }
        .el-form-item__content{
            min-width:220px;
            .el-select{
                width:100%;
            }
            .el-date-editor.el-input, .el-date-editor.el-input__inner{
                width:100%;
            }
        }
        .txtareabox{
            width: 100% !important;
            .el-textarea__inner{
                height: 100px;
            }
        }
    }

    :deep(.upload-box .el-upload-list--picture-card .el-upload-list__item){
        margin-bottom: -15px;
    }
    :deep(.upload-box .el-upload--picture-card){
        border: none;
    }
    .liveimglist{
        display: flex;
        flex-wrap: wrap;
        line-height: initial;
        li {
            position: relative;
            width: 160px;
            margin-right: 15px;
            margin-bottom: 10px;
            display: block;
            border-radius: 4px;
            .el-image{
                border:1px solid rgba(153, 153, 153, 0.4);
                border-radius: 4px;
            }
            .edit-image{
            display: flex;
            position: absolute;
            bottom:0;
            right:0;
            padding: 4px 9px;
            color:#fff;
            font-size: 12px;
            background-color: rgba(0,0,0,0.6);
            };
            .delete-image {
            display: flex;
            position: absolute;
            top:0;
            right:0;
            padding: 3px;
            .el-icon{
                font-size:20px;
            }
            }
            .gtitle{
                margin: 5px 0 2px;
                height:42px;
                font-size: 14px;
                font-weight: bold;
                color:#333;
            }
            .gsubtitle{
                font-size: 12px;
                color:#666;
                display:flex;
                justify-content: space-between;
            }
        }
        li.imgplus{
            >div{text-align: center;line-height:normal;}
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items: center;
            width: 160px;
            height: 100px; overflow: hidden;
            border: 1px dashed rgba(153,153,153,0.4);
            background: rgba(222,222,222,0.4); cursor: pointer;
            .el-icon{font-size: 28px;color:#999;}
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
    }
    .dpformitem {
        .el-form-item__content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
    }
</style>